<!-- 融资查询 (运营端)-->
<template>
	<view class="oms-finance-box">
		<view class="oms-finance-box-filter">
			<view class="filter-btn" @tap="filterFun">
				<image class="oms-finance-box-filter-img" src="/static/main/shaixuan.png"></image>
				<text>筛选</text>
			</view>
		</view>
		<view class="oms-finance-box-table">
			<view class="oms-finance-box-thead">
				<view class="oms-finance-box-th text-l w40">
					<view>融资企业</view>
					<view>融资机构</view>
				</view>
				<view class="oms-finance-box-th text-c w20">
					<view>申请日期</view>
					<view>融资金额</view>
				</view>
				<view class="oms-finance-box-th w40 text-r">
					<view>核心企业</view>
					<view>融资状态</view>
				</view>
			</view>
			<view class="oms-finance-box-tr-box" v-for="tr in tableList" :key="tr.id">
				<view v-if="tr.status == '2'">
					<view class="oms-finance-box-tr ">
						<view class="oms-finance-box-td text-l  w40">
							<view class="oms-finance-box-td-text-name">{{tr.entName}}</view>
							<view>{{tr.bank}}</view>
						</view>

						<view class="oms-finance-box-td text-l w20 ">
							<view class="h66">{{tr.date}}</view>
							<view>{{tr.money | unitConverter}}</view>
						</view>
						<view class="oms-finance-box-td w40 text-r">
							<view class="h66">{{tr.coreName}}</view>
							<view
								:class="tr.status=='1'?'text-color-info':tr.status=='2'?'text-color-error':'text-color-success'"
								@tap="toDetail(tr)">{{valueToName(tr.status,statusList)}}
								<uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
					</view>
					<view class="text-r text-color-error-remark text-color-error">
						<text>{{tr.remark}}</text>
					</view>
				</view>
				<view v-else>
					<view class="oms-finance-box-tr">
						<view class="oms-finance-box-td text-l w40">
							<view class="oms-finance-box-td-text-name">{{tr.entName}}</view>
							<view>{{tr.bank}}</view>
						</view>

						<view class="oms-finance-box-td text-l w20">
							<view class="h66">{{tr.date}}</view>
							<view>{{tr.money | unitConverter}}</view>

						</view>
						<view class="oms-finance-box-td w40 text-r">
							<view class="h66">{{tr.coreName}}</view>
							<view
								:class="tr.status=='1'?'text-color-info':tr.status=='2'?'text-color-error':'text-color-success'"
								@tap="toDetail(tr)">{{valueToName(tr.status,statusList)}} <uni-icons type="right"
									size="12"></uni-icons> </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="omsFilterDialog" type="dialog">
			<uni-popup-dialog class="customer-dialog no-padding-dialog my-no-title-dialog" type="info"
				:before-close="true" confirmText="确认" cancelText="重置" @confirm="dialogFilterConfirm"
				@close="dialogFilterClose">
				<view class="filter-dialog-box">
					<view class="filter-dialog-title-box">
						<text class="filter-dialog-title">融资筛选</text>
						<uni-icons @tap="closeDialog" class="filter-dialog-close" type="closeempty"
							size="20"></uni-icons>
					</view>
					<view class="filter-form">
						<view class="form-cell">
							<view class="text-l">申请日期</view>
							<view class="cell-box my-date-pick-box">
								<uni-datetime-picker :end="applyEnd" :border="false" type="date"
									@change="changeApplyStart">
									<text v-if="applyStart">{{applyStart}}</text>
									<text class="placeholder-color" v-else>起始时间</text>
								</uni-datetime-picker>
								至
								<uni-datetime-picker :start="applyStart" :border="false" type="date"
									@change="changeApplyEnd">
									<text v-if="applyEnd">{{applyEnd}}</text>
									<text class="placeholder-color" v-else>终止时间</text>
								</uni-datetime-picker>
							</view>
						</view>
						<view class="form-cell">
							<view class="text-l">融资金额</view>
							<view class="cell-box">
								<input type="text" v-model="amtStart" class="text-l" placeholder="起始金额"
									placeholder-class="placeholder-color" />
								至
								<input type="text" v-model="amtEnd" class="text-r" placeholder="终止金额"
									placeholder-class="placeholder-color" />
							</view>
						</view>
						<view class="cell-box pt40">
							<text class="cell-title">融资企业</text>
							<input class="cell-input" v-model="entName" type="text" placeholder="请输入"
								placeholder-class="placeholder-color" />
						</view>
						<view class="cell-box pt40">
							<text class="cell-title">融资机构</text>
							<input class="cell-input" v-model="bank" type="text" placeholder="请输入"
								placeholder-class="placeholder-color" />
						</view>
						<view class="cell-box pt40">
							<text class="cell-title">核心企业</text>
							<input class="cell-input" v-model="coreName" type="text" placeholder="请输入"
								placeholder-class="placeholder-color" />
						</view>
						<view class="form-cell">
							<view class="text-l">融资状态</view>
							<view class="cell-box">
								<view v-for="(status,idx) in statusList" :key="status.id">
									<view class="status-item" @tap="changeChoose(status.id)"
										:class="{'ml32':idx!=0,'chose-tag':chooseStatusList.indexOf(status.id)>-1}">
										{{status.text}}
										<view class="chose-img-b" v-if="chooseStatusList.indexOf(status.id)>-1">
											<image class="chose-img" src="/static/main/choose.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [{
						id: '001',
						entName: '北京中煤华远经销公司',
						coreName: '海天味业',
						bank: '中国银行',
						date: '2022-01-01',
						money: 2000,
						status: '1'
					},
					{
						id: '002',
						entName: '北京中煤华远经销公司',
						coreName: '海天味业',
						bank: '中国银行',
						date: '2022-01-01',
						money: 2000,
						status: '0'
					},
					{
						id: '003',
						entName: '北京中煤华远经销公司',
						coreName: '海天味业',
						bank: '中国银行',
						date: '2022-01-01',
						money: 2000,
						status: '2',
						remark: '拒绝原因：资料上传不全不全'
					},
					{
						id: '004',
						entName: '北京中煤华远经销公司',
						coreName: '海天味业',
						bank: '中国银行',
						date: '2022-01-01',
						money: 2000,
						status: '0'
					},
					{
						id: '005',
						entName: '北京中煤华远经销公司',
						coreName: '海天味业',
						bank: '中国银行',
						date: '2022-01-01',
						money: 2000,
						status: '1'
					}
				],
				statusList: [{
						id: '0',
						text: '申请中'
					},
					{
						id: '1',
						text: '已放款'
					},
					{
						id: '2',
						text: '审批拒绝'
					}
				],
				applyStart: '',
				applyEnd: '',
				amtStart: '',
				amtEnd: '',
				entName: '',
				coreName: '',
				bank: '',
				chooseStatusList: []
			}
		},
		methods: {
			valueToName(val, list = []) {
				let name = '';
				if (val && list.length) {
					for (let i = 0; i < list.length; i++) {
						if (list[i].id == val) {
							name = list[i].text
							return name;
						}
					}
				}
				return name
			},
			filterFun() {
				this.applyStart = '';
				this.applyEnd = '';
				this.amtStart = '';
				this.amtEnd = '';
				this.entName = '';
				this.coreName = '';
				this.bank = '';
				this.chooseStatusList = []
				this.$refs.omsFilterDialog.open()
			},
			dialogFilterConfirm() {
				this.$refs.omsFilterDialog.close()
			},
			dialogFilterClose() {
				this.applyStart = '';
				this.applyEnd = '';
				this.amtStart = '';
				this.amtEnd = '';
				this.entName = '';
				this.coreName = '';
				this.bank = '';
				this.chooseStatusList = []
			},
			closeDialog() {
				this.$refs.omsFilterDialog.close()
			},
			changeApplyStart(e) {
				this.applyStart = e
			},
			changeApplyEnd(e) {
				this.applyEnd = e
			},
			changeChoose(item) {
				if (this.chooseStatusList.indexOf(item) > -1) {
					let findIndex = this.chooseStatusList.findIndex((r) => {
						if (r == item) {
							return true
						}
					})
					this.chooseStatusList.splice(findIndex, 1)
				} else {
					this.chooseStatusList.push(item)
				}
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/oms/financingDetails'
				});
			}
		}
	}
</script>

<style>
	.oms-finance-box {
		width: 100%;
		height: 100%;
		background-color: #F8F9Fc;
		padding: 24rpx 0;
		box-sizing: border-box;
	}

	.oms-finance-box-filter {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
	}

	.filter-btn {
		height: 88rpx;
		width: 130rpx;
		display: flex;
		align-items: center;
		margin-left: 50rpx;
	}

	.oms-finance-box-filter-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.oms-finance-box-table {
		margin: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 45rpx 110rpx 20rpx;
		box-sizing: border-box;
	}

	.oms-finance-box-thead {
		line-height: 2;
		padding: 20rpx 0;
		border-bottom: solid 1rpx #EFEFEF;
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.oms-finance-box-tr-box {
		border-bottom: solid 1rpx #EFEFEF;
	}

	.oms-finance-box-tr-box:last-child {
		border: none;
	}

	.oms-finance-box-tr {
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;
		text-align: center;
	}


	.oms-finance-box-th {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;
	}

	.oms-finance-box-td {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
	}

	.w40 {
		flex: 1
	}

	.w20 {
		width: 155rpx;
	}

	.text-color-error-remark {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #FF0000;
		text-align: right;
		font-weight: 400;
		margin-bottom: 23rpx;
	}

	.oms-finance-box-td-text-name {
		width: 135rpx;
		height: 66rpx;
		line-height: 1.2;
		overflow: hidden;
	}

	.h66 {
		height: 66rpx;
		overflow: hidden;
	}

	.filter-dialog-box {
		width: 100%;
		text-align: center;
		position: relative;
	}

	.filter-dialog-close {
		position: absolute;
		right: 30rpx;
		top: 8rpx;
	}

	.filter-dialog-title-box {
		width: 100%;
		height: 105rpx;
		line-height: 105rpx;
		border-bottom: solid 1rpx #EFEFEF;
	}

	.filter-dialog-title {
		font-family: PingFangSC-Semibold;
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
	}

	.filter-form {
		padding: 0 45rpx 48rpx 26rpx;
	}

	.form-cell {
		margin-top: 30rpx;
	}

	.cell-box {
		height: 97rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: solid 1rpx #EFEFEF;
	}

	.pt40 {
		padding-top: 40rpx;
	}

	.cell-title {
		text-align: left;
		width: 200rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 400;
	}

	.cell-input {
		flex: 1;
		text-align: right;
		font-size: 32rpx;
		color: #333333;
		font-weight: 400;
		margin-left: 16rpx;
	}

	.placeholder-color {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #999999;
		letter-spacing: 0;
		font-weight: 400;
	}

	.status-item {
		width: 160rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		background: #F4F5F9;
		border: 1rpx solid #F4F5F9;
		border-radius: 4rpx;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #333333;
		letter-spacing: 0;
		font-weight: 400;
		position: relative;
	}

	.ml32 {
		margin-left: 28rpx;
	}

	.chose-tag {
		background: #EAF1FD;
		border: 1rpx solid rgba(49, 94, 251, 1);
		color: #315EFB;
		font-weight: 600;
	}

	.chose-img-b {
		position: absolute;
		top: -40rpx;
		right: -10rpx;
	}

	.chose-img {
		width: 24rpx;
		height: 24rpx;
	}
</style>